<template>
  <div class="content cash-situation mb20">
    <dc-header :title="'现金情况'"  :icon="'icon-header-back'"></dc-header>
    <div class="content-body">
    <div class="limit-tip">
      <!--<mt-button slot="left">-->
        <span class="linkfont" @click="setInitialCash">点击设置初期现金</span>，补充后可准确算出整体现金量
      <!--</mt-button>-->
    </div>
    <dc-date type = 'ym' @getTabBarDate = "getDate"></dc-date>
    <div>
      <dc-cell class="mt20" title="账上总现金量" :value="cashTotal" sVal="true" :lefttitleStyle="{'font-weight':'bold'}" :valStyle="{color:'#7b78f2',fontSize:'20px',fontWeight:'bold',lineHeight:'60px'}"></dc-cell>
    </div>
    <div>
      <dc-cell class="mt20" :title="celltext" :value="cashChangeMonth" sVal="true" :lefttitleStyle="{'font-weight':'bold'}" :valStyle="{color:'#33c559',fontSize:'20px',fontWeight:'bold',lineHeight:'60px'}"></dc-cell>
    </div>
    <div class="common-card mt20 bg-white">
      <dc-row class="pt40 pb40" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <tshSpan :value ='allIncome' class="num"></tshSpan>
          <!-- <span class="num">{{allIncome}}</span> -->
          <span class="label">累计收入</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <tshSpan :value ='allExpend' class="num"></tshSpan>
          <!-- <span class="num">{{allExpend}}</span> -->
          <span class="label">累计支出</span>
        </dc-col>
      </dc-row>
    </div>
    <div class="common-card mt20 bg-white">
      <dc-cell title="收支及现金趋势" class="main-title"></dc-cell>
      <div class="common-chart" id="complex"></div>
    </div>
    </div>
  </div>
</template>
<script>
  import date from '@/common/plugins/datetabbar';
  import header from '@/common/plugins/header';
  import cell from '@/common/plugins/cell';
  import {initLine} from '@/common/echarts/line';
  import {initColumn} from '@/common/echarts/column';
  import {col, row} from '@/common/Flex';
  import mintUi from '@/common/mintUi';
  import api from '@/common/api/home';

  export default {
    data () {
      return {
        cashTotal: '0.00',
        cashChangeMonth: '0.00',
        allIncome: '0.00',
        allExpend: '0.00',
        celltext: '',
        complex: null,
        thisDate: ''
      };
    },
    mounted () {
      this.complex = initColumn('#complex');
    },
    methods: {
      setInitialCash () {
        let that = this;
        api.getIniMny().then(function (data) {
          mintUi.openPrompt('本月初期现金', {inputType: 'number', inputValue: data}).then(function (e) {
            var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if (!reg.test(e)) {
              mintUi.openToast('请填写数字金额');
              return;
            }
            api.setIniMny({'iniMonthMny': e}).then(function () {
              mintUi.openToast('设置成功');
              that.getMoneyPosition(that.thisDate);
              that.getChartInfo(that.thisDate);
            });
          }, function () {
            console.log('error');
          });
        });
      },
      getDate: function (date) {
        this.getMoneyPosition(date);
        this.getChartInfo(date);
        this.celltext = +date.type === 3 ? '本月现金变动' : '年度现金变动';
        this.thisDate = date;
      },
      initFlowsColumn (data) {
        let charts = data;
        let xAxis = charts[0].trendDetail.map(function (v) {
          return v.timeName;
        });
        let yAxisMaxlist = charts[0].trendDetail.map(function (v) {
          return +v.totalMoney;
        });
        let yAxisMinlist = charts[1].trendDetail.map(function (v) {
          return -+v.totalMoney;
        });
        let seriesLine = charts[2].trendDetail.map(function (v) {
          let arr = v.totalMoney.split(',');
          return +arr.join('');
        });
        initLine('#complex');
        this.complex.hideLoading();
        this.complex.setOption({
          grid: {
            left: '3%',
            right: '3%',
            bottom: '16%',
            top: '8%',
            containLabel: true
          },
          xAxis: {
            data: xAxis || [],
            boundaryGap: true
          },
          legend: {
            data: ['总收入', '总支出', '账上现金量']
          },
          yAxis: [
            {
              type: 'value',
              name: '单位',
              axisLabel: {
                formatter: function (value) {
                  let tem;
                  if (value / 1000000 >= 1) {
                    tem = value / 1000000 + 'M元';
                  } else if (value / 10000 >= 1) {
                    tem = value / 10000 + 'W元';
                  } else {
                    tem = value + '元';
                  }
                  return tem;
                }
              }
            },
            {
              type: 'value',
              name: '单位',
              axisLabel: {
                formatter: function (value) {
                  let tem;
                  if (value / 1000000 >= 1) {
                    tem = value / 1000000 + 'M元';
                  } else if (value / 10000 >= 1) {
                    tem = value / 10000 + 'W元';
                  } else {
                    tem = value;
                  }
                  return tem;
                }
              }
            }
          ],
          series: [
            {
              name: '总收入',
              type: 'bar',
              data: yAxisMaxlist
            },
            {
              name: '总支出',
              type: 'bar',
              data: yAxisMinlist
            },
            {
              name: '账上现金量',
              type: 'line',
              yAxisIndex: 1,
              data: seriesLine
            }
          ]
        });
      },
      getMoneyPosition (data) {
        let postobj = {
          'timeFlag': data.type,
          'beginTime': data.startTime,
          'endTime': data.endTime
        };
        let that = this;
        api.getMoneyPosition(postobj).then(function (res) {
          that.cashTotal = res.cashTotal;
          that.cashChangeMonth = res.cashChangeMonth;
          that.allIncome = res.allIncome;
          that.allExpend = res.allExpend;
        });
      },
      getChartInfo (data) {
        let postobj = {
          'timeFlag': data.type,
          'beginTime': data.startTime,
          'endTime': data.endTime
        };
        let that = this;
        api.getChartInfo(postobj).then(function (res) {
          that.initFlowsColumn(res);
        });
      }
    },
    components: {
      'dc-header': header,
      'dc-date': date,
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  .cash-situation {
    .limit-tip {
      background-color: #ffde97;
      height: px2rem(80px);
      line-height: px2rem(80px);
      font-size: px2rem(28px);
      margin-top: px2rem(88px);
      color: #000;
    }
  }
  #complex {
    height: px2rem(800px);
  }
  .linkfont{
    color:#7b78f2;
    text-decoration: underline;
  }
</style>
